<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>滴答办公系统-员工列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/media/layui/css/layui.css" media="all">
<script src="/media/js/jquery.min.js"></script>
	<script type="text/javascript">

		//修改每页大小
		function changePageSize(pageSize) {
			//alert(pageSize);
			location.href = "/emp_list?pageIndex=1&pageSize=" + pageSize;
		}

		//跳转页面
		function jumpPage(pageCount, pageSize) {
			var pageNum = $("#pageNum").val();
			//alert(pageNum);
			var regex = /^[1-9]\d*$/;
			if (regex.test(pageNum) == true) {
				//alert("是一个数字~");
				if (pageNum >= 1 && pageNum <= pageCount) {
					location.href = "/emp_list?pageIndex=" + pageNum + "&pageSize=" + pageSize;
				} else {
					alert("请输入一个合法的数字!")
				}
			} else {
				alert("请输入一个数字!")
			}
		}
		function changeFlag(id) {
			var text = $("#a_" + id).text();
			//alert(text);
			if (confirm("确定要" + text + "嘛?")) {
				var flag = text == "启用" ? 1 : 0;
				$.getJSON("/emp_updateFlag","id="+id+"&flag="+flag,function (result) {
					//alert(JSON.stringify(result));
					if(result){
						$("#a_" + id).parent().prev().prev().text(text);
						$("#a_" + id).text(flag==1?'禁用':'启用');
						if(flag==1){
							//背景颜色变化
							$("#a_" + id).removeClass("layui-btn layui-btn-mini").addClass("layui-btn layui-btn-danger layui-btn-mini");
						}else{
							//背景颜色变化
							$("#a_" + id).removeClass("layui-btn layui-btn-danger layui-btn-mini").addClass("layui-btn layui-btn-mini");
						}
					}
				});
			}
		}
	</script>
</head>
<body>
	<div class="layui-container">
		<table class="layui-table" id="tbdata" lay-filter="tbop">
			<thead>
				<tr>
					<td>序号</td>
					<td>工号</td>
					<td>姓名</td>
					<td>部门</td>
					<td>性别</td>
					<td>手机号</td>
					<td>QQ号</td>
					<td>邮箱</td>
					<td>入职日期</td>
					<td>状态</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr th:each="e:${pageUtils.records}">
					<td th:text="${e.id}">1</td>
					<td th:text="${e.no}">34567</td>
					<td th:text="${e.name}">张三</td>
					<td th:text="${e.depart.name}">教学部</td>
					<td th:text="${e.sex}">男</td>
					<td th:text="${e.phone}">13345678999</td>
					<td th:text="${e.qq}">1378999</td>
					<td th:text="${e.email}">zhangsan@qq.com</td>
					<td th:text="${e.createdate}">2018-10-10</td>
					<td th:text="${e.flag==1?'启用':'禁用'}">2018-10-10</td>
					<td>
						<a class="layui-btn layui-btn-mini" th:id="|a_${e.id}|" href="#" th:onclick="|changeFlag(${e.id});|" th:if="${e.flag==0}" th:text="${e.flag==0?'启用':'禁用'}">启用</a>
						<a class="layui-btn layui-btn-danger layui-btn-mini" th:id="|a_${e.id}|" href="#" th:onclick="|changeFlag(${e.id});|" th:if="${e.flag==1}" lay-event="del" th:text="${e.flag==0?'启用':'禁用'}">禁用</a>

						<a class="layui-btn layui-btn-mini" th:href="|/update_toemp/${e.id}|">编辑</a>
						<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" th:onclick="|deleteCourse(${e.id});|">删除</a>
					</td>
				</tr>

			</tbody>
		</table>
		<div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">

			<a th:href="|/emp_list?pageIndex=${pageUtils.pageIndex-1}&pageSize=${pageUtils.pageSize}|"
			   th:if="${pageUtils.pageIndex>1}" class="layui-laypage-pre" data-page="0">
				<i class="layui-icon">&lt;</i>
			</a>

			<!--<span style="color:#009688;font-weight: bold;">1</span>-->
			<a th:each="num:${pageUtils.numbers}" th:href="|/emp_list?pageIndex=${num}&pageSize=${pageUtils.pageSize}|"
			   th:style="${pageUtils.pageIndex==num}?'color:#009688;font-weight: bold;':''" th:text="${num}">xxxx</a>

			<a th:href="|/emp_list?pageIndex=${pageUtils.pageIndex+1}&pageSize=${pageUtils.pageSize}|"
			   th:if="${pageUtils.pageIndex<pageUtils.pageCount}" class="layui-laypage-next" data-page="2">
				<i class="layui-icon">&gt;</i>
			</a>

			<span class="layui-laypage-skip">到第
							    <input type="text" min="1" th:value="${pageUtils.pageIndex}" class="layui-input"
									   id="pageNum">页
								<button type="button" class="layui-laypage-btn"
										th:onclick="|jumpPage(${pageUtils.pageCount},${pageUtils.pageSize});|">确定</button>
							</span>
			<span class="layui-laypage-count">当前[[${pageUtils.pageIndex}]]/[[${pageUtils.pageCount}]]页/[[${pageUtils.totalCount}]]条</span>
			<span class="layui-laypage-limits">
							    <select lay-ignore="" onchange="changePageSize(this.value);">
							        <option value="5" th:selected="${pageUtils.pageSize==5}">5 条/页</option>
									<option value="10" th:selected="${pageUtils.pageSize==10}">10 条/页</option>
									<option value="15" th:selected="${pageUtils.pageSize==15}">15 条/页</option>
									<option value="20" th:selected="${pageUtils.pageSize==20}">20 条/页</option>
							</select>
							</span>
		</div>
	</div>
	
	<script src="/media/layui/layui.js"></script>
	
	<script type="text/javascript">
	   function deleteCourse(id){
		   layui.use('table', function() {
			   layer.confirm('是否确认删除员工?',function(index) {
			   	$.getJSON("/delete_emp","id="+id,function (result) {
					if (result==true){
						layer.msg("删除成功", {icon : 6},function () {
							window.location.reload();
						});
					}else {
						layer.msg("删除失败", {icon : 5});
					}
				})


			   });
		   });
	   }
	</script>

</body>
</html>